<template>
  <div class="upload-Aptitude">
    <div @click="showModal()">
      <slot></slot>
    </div>
    <Modal
      v-model="modalValue"
      :title="title"
      @on-ok="handleOk"
      @on-cancel="handleCancel"
    >
      <Form
        :model="formData"
        ref="FormRef"
        :rules="ruleValidate"
        label-position="top"
      >
        <Row type="flex" justify="center" :gutter="20">
          <Col span="12">
            <FormItem label="资质名称" prop="companyAptitudeName">
              <Input
                v-model="formData.companyAptitudeName"
                placeholder="请输入资质名称"
              ></Input>
            </FormItem>
          </Col>
          <Col span="12">
            <FormItem label="等级" prop="lv">
              <Input
                v-model="formData.lv"
                placeholder="请输入等级"
              ></Input>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="有效截止日期" prop="validEndDate">
              <DatePicker
                type="date"
                format="yyyy-MM-dd"
                placeholder="请选择有效截止日期"
                :value="formData.validEndDate"
                @on-change="dateChange"
              ></DatePicker>
            </FormItem>
          </Col>
          <Col span="24" prop="fileVo">
            <!-- <span v-show="0">{{ echoFile }}</span> -->
            <FormItem label="上传资质照片">
              <ViewImageList
                v-if="echoFile.length"
                :echoFile="echoFile"
                @delImge="delImge"
              />
              <UploadDrag v-else @uploadSuccess="uploadPhotoSuccess" />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer" class="footer-btn">
        <!-- <BtnBox isIcon type="light-blue" text="取消" /> -->
        <BtnBox isIcon text="确认" @BtnClick="handleOk('FormRef')" />
        <!-- <Button @click="handleCancel()">取消</Button>
        <Button @click="handleOk('FormRef')">确定</Button> -->
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "上传资质/修改",
    },
  },
  data() {
    return {
      formData: {
        companyAptitudeName: "",
        lv: 0,
        validEndDate: "",
        fileVo: {
          fileId: "",
          fileName: "",
          filePreviewUrl: "",
          fileDownloadUrl: "",
          fileSize: "",
          fileSuffix: "",
        },
      },
      ruleValidate: {
        companyAptitudeName: [
          {
            required: true,
            message: "请输入资质名称",
            trigger: "blur",
          },
        ],
      },
      lvList: [
        {
          id: 1,
          lv: 1,
        },
        {
          id: 2,
          lv: 2,
        },
      ],
      echoFile: [],
      modalValue: false,
      isAdd: true,
    };
  },
  methods: {
    handleOk() {
      console.log(this.isAdd, "this.isAdd");
      let item = JSON.parse(JSON.stringify(this.formData));
      if (this.isAdd) {
        this.$emit("handleOk", item);
      } else {
        console.log(this.isAdd, "this.isAdd222");
        this.$emit("handleUpdetaOk", item);
      }
      this.modalValue = false;
    },
    handleCancel() {},
    dateChange(val) {
      this.formData.validEndDate = val;
    },
    showModal(item) {
      if (!item) {
        this.isAdd = true;
        this.formData.validEndDate = "";
        this.formData.fileVo = {}
        this.$refs["FormRef"].resetFields();
        this.echoFile = [];
      } else {
        this.isAdd = false;
        this.formData = item;
        this.echoFile = [item.fileVo]
      }
      this.modalValue = true;
    },
    uploadPhotoSuccess(file) {
      this.formData.fileVo = file
      this.echoFile.push(file)
    },
    delImge(index) {
      this.formData.fileVo = {};
      this.echoFile.splice(index, 1);
    },
  },
  mounted() {
    this.inter = setInterval(() => {
      if (this.timer > 0) {
        this.timer--;
      } else {
        clearInterval(this.inter);
        this.isBtnDisabled = false;
      }
    }, 1000);
  },
};
</script>

<style lang="less" scoped>
.page-agreement {
  h3 {
    color: #333;
    margin-bottom: 25px;
    font-size: 20px;
  }
  .agreement-main {
    height: 30vh;
    overflow: auto;
    margin-bottom: 25px;
  }
}
.agreement-btn {
  display: flex;
  justify-content: center;
}
</style>
